<template>
	<view class="content">
		<view class="statusBox"></view>
		<view class="searchBox width90 padding5">
			<view class="clockBox" @tap="TapBack">
				<image class="iconClock" src="/static/index/icon_back.png" mode=""></image>
			</view>
			<view class="search">
				<uni-icons class="icons" type="search" color="#999999" size="16"/>
				<input class="searchInput" :value="inputValue" type="text" placeholder="请输入关键词" @input="getValue" @confirm="searBtn">
			</view>
			<view class="clearBoth"></view>
		</view>
		
		<view v-if="showContent==false">
			<view class="titleBox width90 padding2" v-if="historyData.length !== 0">
				<view class="left fontSize14">历史搜索</view>
				<uni-icons class="icon" type="trash" color="#B3B3B3" size="16" @tap="clearHistory"/>
			</view>
			<view class="clearBoth"></view>
			
			<view class="historyBox width90 padding2" v-if="historyData.length !== 0">
				<view class="historyName textCenter fontSize14" v-for="(item,index) in historyData" :key="index" @tap="SearchContent(item.name)">{{item.name}}</view>
			</view>
			<view class="clearBoth"></view>
			
			<view class="titleBox width90 padding2">
				<view class="left fontSize14">热门搜索</view>
				<view class="name fontSize14" @tap="changeHot">换一换</view>
				<uni-icons class="icon" type="reload" color="#B3B3B3" size="16" @tap="changeHot"/>
				<view class="clearBoth"></view>
			</view>
			<view class="clearBoth"></view>
			
			<view class="historyBox width90 padding2" v-if="hotData.length !== 0">
				<view class="historyName textCenter fontSize14" :class=" item.type == 1 ? 'hot' : '' " v-for="(item,index) in hotData" :key="index" @tap="SearchContent(item.name)">{{item.name}}</view>
			</view>
			<view class="clearBoth"></view>
		</view>
		
	</view>
</template>
<style>
	.content{width: 90%;margin-left: 5%;}
	.searchBox{background: white;margin-top: 52upx;margin-bottom: 20upx;}
	.searchBox .search{width:60%;padding:0 2.5%;height:56upx;line-height: 56upx;float:left;background:rgb(245,245,249);border-radius: 100upx;position: relative;}
	.searchBox .search .icons{margin-left:10upx;float: left;}
	.searchBox .search .btnSearch{float: right;width:20%;text-align: center;position: absolute;top:0;right:-20%;font-size: 14px;}
	.searchBox .search .searchInput{width:70%;color:#999999;font-size: 14px;height:56upx;line-height: 56upx;margin-left:20upx;float: left;}
	.searchBox .search .uni-input-placeholder{font-size: 14px;}
	.searchBox .clockBox{width:10%;float: left;position: relative;}
	.searchBox .clockBox .iconClock{width:24upx;height:40upx;float: left;margin-top: 8upx;}
	.content .titleBox .left{color:#B3B3B3;float: left;}
	.content .titleBox .icon{float: right;position: relative;top:4upx}
	.content .titleBox .name{color:#B3B3B3;float: right;margin-left: 20upx;}
	.content .historyBox{display: flex;justify-content:left;flex-wrap: wrap;}
	.content .historyBox .historyName{background:rgb(245,245,247);color:#30313B;border-radius: 100upx;padding:5upx 15upx;margin:20upx;margin-left: 0;margin-right:30upx;}
	.content .hot{border:1px solid #C68660;background: white !important;color:#C68660 !important;}
</style>
<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import Share from '@/common/wx_share.js'
	export default {
		components:{
			uniIcons
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages_index/pages/search/search',
					imageUrl:'',
					desc:'',
					content:''
				},
				historyData:[],
				hotData:[
					// {"name":"demo1","type":1},
					// {"name":"demo333","type":2},
				],
				inputValue:"",
				showContent:false,
				titleIndex:0,
			}
		},
		onLoad(){
			this.AjaxLoad();
		},
		methods: {
			AjaxLoad(){
				var that = this;
				var hosList = []
				uni.getStorage({
				    key: 'history',
				    success: function (res){
						that.historyData = res.data
				    }
				});
				let params={
				};
				this._$InitRequest.request('Search/searchname', params).then(res => {
					res.data.hot_search_log.forEach( (item,index) =>{
						hosList.push({
							id:item.id,
							name:item.name,
							sort:item.sort,
							type:1
						})
					})
					hosList.forEach((item)=>{
						this.hotData.push(item)
					})
					console.log( this.hotData )
				},error=>{})
				
			},
			getValue(e){this.inputValue = e.target.value},
			searBtn(){
				if( this.inputValue == "" ){
					uni.showToast({icon:"none",title:"请输入搜索内容"})
					return;
				}else{
					var val = {"name":this.inputValue}
					this.historyData.push(val)
					uni.setStorage({
					    key: 'history',
					    data: this.historyData,
					    success: function(){}
					});
					this.jumpSearch(this.inputValue)
				}
			},
			clearHistory(){
				var that = this;
				uni.removeStorage({
				    key: 'history',
				    success: function (res) {
						uni.showToast({icon:"none",title:"删除成功"})
						that.historyData = []
				    }
				});
			},
			changeHot(){
				this.pages = 1
				this.hotData = []
				this.AjaxLoad();
				return;
				let param={
					"page":1,
				};
				this._$InitRequest.request('api/v1/User/myTg', param).then(res => {
					console.log( res , "index" );
				},error=>{})
			},
			SearchContent(name){
				this.showContent = true
				this.inputValue = name
				this.jumpSearch(name)
			},
			TapBack(){uni.switchTab({url:"/pages/tabbar/index"})},
			jumpSearch(e){
				uni.navigateTo({
					url:"/pages_index/pages/searchPages/searchPages?searchValue=" + e
				})
			},
		}
	}
</script>